<template>
	<view class="pay-public">
		<view class="title uni-h5">商家收款信息：</view>
		<view class="list">
			<view
				class="list-item flex-center-between"
				v-for="(item, index) in publicAccount"
				:key="index">
				<view class="list-item-name">{{item[0]}}</view>
				<view class="list-item-value">{{item[1]}}</view>
			</view>
		</view>
		<view class="title uni-h5">客户付款信息：(请转账完成后填写下面信息)</view>
		<view class="list">
			<view class="form">
				<view class="form-cell flex-center-between">
					<text class="form-cell-name">*付款人名称</text>
					<input
						class="form-cell-value"
						type="text"
						:value="payName"
						data-name="payName"
						placeholder="请输入付款人名称"
						@input="inputChange" />
				</view>
				<view class="form-cell flex-center-between">
					<text class="form-cell-name">*付款人电话</text>
					<input
						class="form-cell-value"
						type="number"
						:value="payPhone"
						data-name="payPhone"
						placeholder="请输入付款人电话"
						@input="inputChange" />
				</view>
				<view class="form-cell flex-center-between">
					<text class="form-cell-name">*付款人账号</text>
					<input
						class="form-cell-value"
						type="number"
						:value="payAccount"
						data-name="payAccount"
						placeholder="请输入付款人账号"
						@input="inputChange" />
				</view>
				<view class="form-cell flex-center-between">
					<text class="form-cell-name">付款人开户行</text>
					<input
						class="form-cell-value"
						type="text"
						:value="payBank"
						data-name="payBank"
						placeholder="请输入开户行"
						@input="inputChange" />
				</view>
				<view class="form-cell flex-center-between">
					<text class="form-cell-name">*金额</text>
					<input
						class="form-cell-value"
						type="number"
						:value="money"
						data-name="money"
						placeholder="请输入金额"
						@input="inputChange" />
				</view>
				<view class="form-cell flex-center-between">
					<text class="form-cell-name">用途</text>
					<input
						class="form-cell-value"
						type="text"
						:value="uses"
						data-name="uses"
						placeholder="请输入用途"
						@input="inputChange" />
				</view>
				<!-- <view class="form-cell flex-center-between">
					<text class="form-cell-name">时间</text>
					<picker mode="date" :value="date" @change="bindDateChange">
						<text class="value">{{date}}</text>
						<uni-icon type="arrowright" size="20" color="#999"></uni-icon>
					</picker>
				</view> -->
				<view class="cert-add-tit">*附件</view>
				<view class="cert-add-upload">
					<button v-if="!licenseImgUrl" class="cert-add-button" @click="uploadImage">点击上传图片</button>
					<image
						v-else
						class="cert-add-upload-img"
						:src="licenseImgUrl"
						mode="aspectFill"
						@click="uploadImage">
					</image>
					<view class="cert-add-upload-notice">
						请确保上传的照片边框完整、字体清晰、亮度均匀
					</view>
				</view>
			</view>
		</view>
		<view class="submit-btn">
			<button @click="submit">提交</button>
		</view>
		<!-- <view class="notice">
			请在00天24时00分内通过网上银行或银行柜台手机银行向该账号完成转账。
		</view> -->
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon.vue"
	export default {
		components: {
			uniIcon
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				order_no: null,
				publicAccount: [],
				payName: '',
				payPhone: null,
				payAccount: null,
				payBank: '',
				money: 0,
				uses: '',
				date: currentDate, // 时间
				licenseImgUrl: ''
			}
		},
		onLoad(option) {
			this.order_no = option.order_no
			this.payForPublic()
		},
		methods: {
			/**
			 * 提交
			 */
			async submit(){
				if(!this.checkPayName()) return
				if(!this.checkPayPhone()) return
				if(!this.checkPayAccount()) return
				if(!this.checkPayMoney()) return
				if(!this.checkLicenseImgUrl()) return
				let body = {
					payName: this.payName,
					payAccount: this.payAccount,
					payPhone: this.payPhone,
					payBank: this.payBank,
					money: this.money,
					uses: this.uses,
					licenseImgUrl: this.licenseImgUrl
				}
				let res = await this.$http.request({
					method: 'post',
					url: '/api/order/pay',
					data: {
						order_no: this.order_no,
						pay_way: 3, //支付类型 1支付宝 2微信 3对公转账 4他人支付 （默认微信支付，兼容以前没有传支付类型）
						offline: body
					}
				})
				if (res.status === 1) {
					this.pageTo('/pages/index/payResult?result=1')
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 获取对公转账账户信息
			 */
			async payForPublic() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/version/account_number_pay',
					data: {}
				})
				if (res.status === 1) {
					this.publicAccount = Object.entries(res.data.data)
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 监听日期变化
			 * @param {Object} e
			 */
			bindDateChange(e) {
				this.date = e.target.value
			},
			/**
			 * 日期格式化
			 */
			getDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			/**
			 * 上传图片
			 */
			uploadImage() {
				uni.chooseImage({
					count: 1, //默认9
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths
						uni.uploadFile({
							url: this.$baseUrl + '/api/upload/picture',
							filePath: tempFilePaths[0],
							name: 'images',
							header: {
								'content-type': 'multipart/form-data',
								'token': uni.getStorageSync('USER_INFO').token || '',
								'way': 'app',
							},
							success: (uploadFileRes) => {
								// console.log(uploadFileRes.data)
								this.licenseImgUrl = this.$baseUrl + uploadFileRes.data
							},
							fail: (err) => {
								uni.showToast({
									title: '上传失败' + err,
									icon: 'none'
								})
							}
						});
					}
				});
			},
			inputChange(e) {
				this[e.target.dataset.name] = e.detail.value
			},
			/**
			 * 校验付款人名称
			 */
			checkPayName() {
				if(!this.payName){
					uni.showToast({
						title: '付款人名称不能为空',
						icon: 'none'
					})
					return false
				}
				return true
			},
			/**
			 * 校验手机号
			 */
			checkPayPhone() {
				if (!(/^1[3456789]\d{9}$/.test(this.payPhone))){
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					})
					return false
				}
				return true
			},
			/**
			 * 校验银行卡号
			 */
			checkPayAccount() {
				// if (!(/^([1-9]{1})(\d{14}|\d{18})$/.test(this.payAccount))){
				// 	uni.showToast({
				// 		title: '请输入正确银行卡号',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				if (!this.payAccount){
					uni.showToast({
						title: '请输入银行卡号',
						icon: 'none'
					})
					return false
				}
				return true
			},
			/**
			 * 校验转账金额
			 */
			checkPayMoney() {
				if(!this.money){
					uni.showToast({
						title: '金额不能为空',
						icon: 'none'
					})
					return false
				}
				return true
			},
			/**
			 * 校验转账金额
			 */
			checkLicenseImgUrl() {
				if(!this.licenseImgUrl){
					uni.showToast({
						title: '请上传附件',
						icon: 'none'
					})
					return false
				}
				return true
			},
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			}
		}
	}
</script>

<style lang="scss">
	.pay-public{
		.title{
			padding-left: 40rpx;
		}
		.list{
			padding: 0 40rpx;
			background: $uni-bg-color;
			border-top: 1rpx solid $uni-border-color;
			&-item{
				height: 110rpx;
				border-bottom: 1rpx solid $uni-border-color;
				&:last-child{
					border-bottom: none;
				}
				&-name{
					color: $uni-text-color-grey2;
				}
				&-value{}
			}
			.form{
				background: $uni-bg-color;
				&-cell{
					height: 110rpx;
					border-bottom: 1rpx solid $uni-border-color;
					&:last-child{
						border-bottom: none;
					}
					&-name{
						width: 200rpx;
						color: $uni-text-color-grey2;
					}
					&-value{
						text-align: right;
					}
				}
			}
			.after-sale-phone{
				margin-top: 100rpx;
				text-align: center;
				.tit{
					color: $uni-text-color-grey;
					font-size: $uni-font-size-sm1;
				}
				.con{
					font-size: $uni-font-size-sm2;
				}
			}
		}
		.notice{
			width: 690rpx;
			margin: 20rpx auto;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			background: #fff6e5;
			border-radius: $uni-border-radius-sm1;
			font-size: $uni-font-size-sm2;
		}
		.cert-add-upload{
			padding: 40rpx;
			.cert-add-upload-img{
				width: 426rpx;
				height: 252rpx;
				display: block;
				margin: 20rpx auto;
				background: $uni-bg-color-grey2;
				
			}
			.cert-add-upload-notice{
				text-align: center;
				color: $uni-text-color-grey;
				font-size: $uni-font-size-sm1;
			}
			.cert-add-button{
				width: 200rpx;
				font-size: 24rpx;
				margin-bottom: 20rpx;
			}
		}
		.submit-btn{
			padding: 0 30rpx;
		}
	}
</style>
